import React from 'react';
import {Col,Row,Carousel,Button} from 'antd';
import { LeftOutlined,RightOutlined } from '@ant-design/icons';

function Displayvlogs() {

    const containerStyle = {
        height: '80vh',
        color: '#202c00',
        background: '#526464'
    };
    const buttonNextStyle = {
        position: 'absolute',
        marginTop: '32vh',
        zIndex: 1,
        height: '10vh'
    };
    const buttonPrevStyle = {
        position: 'absolute',
        marginTop: '32vh',
        marginLeft: '77.7vw',
        zIndex: 1,
        height: '10vh',
    };
    const card = React.createRef();

    return (
        <div style={{"margin":"8vh 0"}}>
            <Button icon={<LeftOutlined />} style={buttonNextStyle} onClick={()=>{card.current.next()}} ghost></Button>
            <Button icon={<RightOutlined />} style={buttonPrevStyle} onClick={()=>{card.current.prev()}} ghost></Button>
            <Carousel effect="fade" autoplay ref={card}>
                {
                    [1,2,3,4].map((x)=>{
                        return(
                            <div>
                                <div  style={containerStyle}>
                                    <Row gutter={[16, 16]}>
                                        {
                                            [1,2,3,4].map((y)=>{
                                                return(
                                                    <Col span={6} >
                                                        {
                                                            [1,2,3,4].map((z)=>{
                                                                return(
                                                                    <div style={{"height":"20vh"}}>
                                                                        视频位{x}{y}{z}
                                                                    </div>
                                                                )
                                                            })
                                                        }
                                                    </Col>
                                                )
                                            })
                                        }
                                    </Row>
                                </div>
                            </div>
                        )
                    })
                }
            </Carousel>
        </div>
    )

}

export default Displayvlogs;
